import React, { useEffect, useState } from "react";
import styles from "./Index.module.css";
import { Button, NavBar, Radio } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import instance from "../../api/request";
function Index() {
  const nav = useNavigate();
  const [title, setTitle] = useState("标题");
  const [id, setId] = useState(22222222222222);
  const [price, setPrice] = useState("520.13");
  const [paymentMethod, setPaymentMethod] = useState(""); // 支付方式状态，默认为空

  // 生成随机订单号
  const generateRandomId = () => {
    return Math.floor(Math.random() * 1000000000000000); // 生成15位随机数
  };

  // 页面加载时生成随机ID
  useEffect(() => {
    setId(generateRandomId());
  }, []);

  // 支付函数
  const handlePay = () => {
    // 检查支付方式
    if (paymentMethod === "wechat") {
      alert("微信支付功能暂未开放，请选择支付宝支付！");
      return;
    }
    
    if (paymentMethod === "") {
      alert("请选择支付方式！");
      return;
    }
    
    // 生成新的随机订单号
    const randomId = generateRandomId();
    
    instance.get("/pay/pay", {
        params: {
          title,
          id: randomId,  // 使用随机生成的ID
          price,
        },
      })
      .then((res) => {
        console.log(res, "====支付");
        // 获取支付链接
        const payUrl = res.data.data;
        if (payUrl) {
          // 跳转到支付宝支付页面
          window.location.href = 'https://openapi-sandbox.dl.alipaydev.com/gateway.do?method=alipay.trade.wap.pay&app_id=9021000133628166&charset=utf-8&version=1.0&sign_type=RSA2&timestamp=2025-09-24+16%3A00%3A41&return_url=http%3A%2F%2Flocalhost%3A5173%2Fsuccess&sign=TYXcPX0x8SmgJyWdk%2BIv1W1HTEN8kuwmUos5CdMyNHN%2BcngmbQSM495k9VAgfRc%2F2uSwOV9dy3gTEtFS1lmYIu4FO21dNUbF0pGV5W4pzXwj%2BZ7KUwPcFgnbUVe%2FvfoqZUatXx02xRmyJ4OqKPKj0umKZtbOXiNs8lfAXcT8TAvONnPbP4bw0LQ15KjnUpGbWgpJ6JRbDAGu7vssPxGj02X%2FAiUAaN0mUxVjoeqvapsh8cDqBdxo7klYOdF8O2v1XLY9ufMRcyLVNe8%2FmGX9vc%2F0az8yvLI0A%2BAwS37XhQMGw9FH5RTwoJqWmTdYQBTjK4rIAZ1RzkyTqpjuLiA1eg%3D%3D&alipay_sdk=alipay-sdk-nodejs-4.0.0&biz_content=%7B%22out_trade_no%22%3A%2222222222222222%22%2C%22total_amount%22%3A%22520.13%22%2C%22subject%22%3A%22%E6%A0%87%E9%A2%98%22%2C%22product_code%22%3A%22QUICK_WAP_WAY%22%7D';
        }
      })
      .catch((error) => {
        console.error("支付请求失败:", error);
      });
  };

  return (
    <div className={styles.quejiaoz}>
      <div className={styles.nav}>
        <NavBar onBack={() => nav(-1)}>确认缴费</NavBar>
      </div>

      <div className={styles.card} style={{ marginTop: "30px" }}>
        <h3 style={{ marginLeft: "10px", paddingTop: "10px" }}>缴费信息 </h3>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          就诊人:王小柯
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          登记号:20200101001602A
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          就诊科室:门外诊一科
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          开单医生:刘医师
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          开单时间:2020-01-01 13:20:36
        </div>
      </div>

      <div className={styles.card} style={{ marginTop: "20px" }}>
        <h3 style={{ marginLeft: "10px", paddingTop: "18px" }}>订单信息</h3>
        <div style={{ marginLeft: "10px", marginTop: "18px" }}>
          订单编号:{id}
        </div>
        <div style={{ marginLeft: "10px", marginTop: "18px" }}>
          下单时间:2020-01-01 13:23:36
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          支付金额:
          <span style={{ color: "red", fontSize: "18px" }}>￥520.13</span>
        </div>
      </div>

      <div className={styles.card3} style={{ marginTop: "20px" }}>
        <h3 style={{ marginLeft: "10px", paddingTop: "18px" }}>支付方式</h3>
        <div
          style={{
            marginLeft: "10px",
            marginTop: "18px",
            borderBottom: "1px solid #f2f2f2",
          }}
        >
          支付宝支付:
          <span style={{ marginLeft: "190px" }}>
            <Radio 
              checked={paymentMethod === "alipay"}
              onChange={() => {
                if (paymentMethod === "alipay") {
                  setPaymentMethod(""); // 如果已选中，则取消
                } else {
                  setPaymentMethod("alipay"); // 如果未选中，则选中
                }
              }}
            />
          </span>
        </div>
        <div style={{ marginLeft: "10px", marginTop: "18px" }}>
          微信支付:
          <span style={{ marginLeft: "190px" }}>
            <Radio 
              checked={paymentMethod === "wechat"}
              onChange={() => {
                if (paymentMethod === "wechat") {
                  setPaymentMethod(""); // 如果已选中，则取消
                } else {
                  setPaymentMethod("wechat"); // 如果未选中，则选中
                }
              }}
              style={{marginLeft:'13px'}} 
            />
          </span>
        </div>
      </div>

      <div>
        <Button
          block
          color="primary"
          size="large"
          className={styles.btn}
          onClick={handlePay}
        >
          确认缴费
        </Button>
      </div>
    </div>
  );
}

export default Index;
